<template>
	<view class="withdDetail">
		<navBar isBack backColor="#fff" title="提现明细" color="#fff" background="transparent"></navBar>
		<view class="wD_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 累计提现 -->
			<view class="wD_nowRatio">
				0
				<view class="wD_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/withdMoney.png" mode=""></image>
					累计提现
				</view>
			</view>
		</view>
		
		<!-- //选择时间 -->
		<view class="wD_date" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="selectTime" @click="pickTime">
				{{year}}年{{month}}月
				<image :src="`${baseImg}/static/distri/distriMoney/pullBottom.png`" mode=""></image>
			</view>
		</view>
		
		<!-- 提现列表 -->
		<view class="wD_list">
			<view class="wD_listItem" v-for="(item,index) in putList" :key="index">
				<view class="wD_listItem_Left">
					<view>{{item.status==0?'审核中':item.status==1?'已通过':item.status==2?'已拒绝':item.status==3?'已打款':item.status==4?'已取消':''}}</view>
					<span>{{$utils.getFormatDate(item.update_time*1000,'yyyy-MM-dd hh:mm')}}</span>
				</view>
				<view class="wD_listItem_Right">+{{item.amount}}元</view>
			</view>
		</view>
		<u-picker mode="time" @confirm="pickTimeOk" v-model="showTime" :params="params"></u-picker>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	export default{
		components:{
			navBar
		},
		data(){
			return{
				baseImg:this.$static,
				putList:[],
				navHeight:100,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showTime:false,
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1
			}
		},
		onLoad() {
			this.navHeight = 430 - this.$store.state.system.navBarHeight*2
			this.getPutList()
		},
		methods:{
			// 获取提现列表
			getPutList(){
				let params = {
					status:'',
					level:1
				}
				this.$api.getPutList(params).then(res=>{
					console.log(res,'提现列表')
					if(res.code==1){
						this.putList = res.data.list?res.data.list:[]
					}
				})
			},
			
			// 时间选择
			pickTime(){
				this.showTime = true
			},
			// 弹框确定
			pickTimeOk(e){
				console.log(e,'时间选择确定')
				this.year = e.year
				this.month = e.month
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdDetail{
		.wD_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 累计佣金
		.wD_nowRatio{
			position: absolute;
			bottom: 0;
			left: 0;
			
			z-index: 2;
			padding: 0 24rpx 0 36rpx;
			bottom: 60rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.wD_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		//选择时间
		.wD_date{
			width: 100%;
			height: 98rpx;
			background-color: #fff;
			.selectTime{
				padding: 28rpx;
				display: flex;
				align-items: center;
				width: 100%;
				background-color: #fff;
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				image{
					margin-left: 12rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		
		// 提现列表
		.wD_list{
			width: 702rpx;
			margin: 40rpx auto 20rpx;
			padding: 12rpx 24rpx 12rpx 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.wD_listItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				border-bottom: 2rpx solid #F4F4F4;
				.wD_listItem_Left{
					view{
						width: 100rpx;
						height: 44rpx;
						background: #94E3B4;
						border-radius: 16rpx;
						text-align: center;
						font: 400 26rpx/44rpx PingFang SC;
						color: #fff;
					}
					span{font: 400 22rpx/36rpx PingFang SC;color: #A0A0A0;}
					
					//待审核是背景颜色
					.wD_leftActive{background-color: #FF7664;}
				}
				.wD_listItem_Right{
					width: 160rpx;
					height: 88rpx;
					background: #F8F8F8;
					border-radius: 4rpx;
					text-align: center;
					font: 600 24rpx/88rpx PingFang SC;
					color: #FA4E37;
				}
				 //待审核时右边金额文字颜色
				.wD_rightActive{color: #000;}
			}
		}
	}
</style>
